# Usage

The radio and radio group are used for selecting a single option from a list.
If you need to have an unselected state, just add a radio button with a None option.
Begin labels with a capital letter.

<br />

Evergreen exports two components to create radios and radio groups:
- **RadioGroup**: Helps manage a group of radios. Try this first.
- **Radio**: Directly maps to a `input` element.

<br />
<br />

# RadioGroup

The `RadioGroup` is the preferred way to create radio groups in most use cases.

<br />

## Default size

```jsx
function DefaultRadioGroupExample() {
  const [options] = React.useState([
    { label: 'Read-only', value: 'read-only' },
    { label: 'Write', value: 'write' },
    { label: 'Restricted', value: 'restricted' }
  ])

  const [value, setValue] = React.useState('restricted')
  return (
    <RadioGroup
      label="Permissions"
      value={value}
      options={options}
      onChange={event => setValue(event.target.value)}
    />
  )
}
```

## Bigger size

```jsx
function BiggerSizeRadioGroupExample() {
  const [options] = React.useState([
    { label: 'Read-only', value: 'read-only' },
    { label: 'Write', value: 'write' },
    { label: 'Restricted', value: 'restricted' }
  ])

  const [value, setValue] = React.useState('restricted')
  return (
    <RadioGroup
      label="Permissions"
      size={16}
      value={value}
      options={options}
      onChange={event => setValue(event.target.value)}
    />
  )
}
```

# Radio

## Radio states

```jsx
<Pane aria-label="Radio Group Label 12" role="group">
  <Radio checked name="group" label="Radio default" />
  <Radio name="group" checked label="Radio checked" />
  <Radio name="group" disabled label="Radio disabled" />
  <Radio name="group" disabled label="Radio checked disabled" />
</Pane>
```

## Radio states (bigger)

```jsx
<Pane aria-label="Radio Group Label 16" role="group">
  <Radio checked size={16} name="group2" label="Radio default" />
  <Radio size={16} name="group2" checked label="Radio checked" />
  <Radio size={16} name="group2" disabled label="Radio disabled" />
  <Radio size={16} name="group2" disabled label="Radio checked disabled" />
</Pane>
```
